<template>
  <!--加工厂的产品成本列表-->
  <a-card :bordered="false">
    <a-tabs @change="callback">
      <a-tab-pane key="1" tab="面料成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="fabricdata"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap">

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="加价项成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"

            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>

          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="3" tab="工艺成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns3"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
          <a @click="gotodetail(record.orderSn)">查看详情</a>
          <a style="margin-left: 8px;" v-if="Number(record.status) >= 1 && record.status != '11'"
             @click="$router.push({path:'/orderCenter/SingleCBList',query:{orderSn:record.orderSn}})">订单成本</a>
           <a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>
          <a-menu-item v-show="record.status=='1'">
                  <a-popconfirm title="确定接单吗?" @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即接单</a>
                  </a-popconfirm>
          </a-menu-item>

        </span>
          </a-table>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="返修成本">
        <!--table区域-begin-->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns4"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>

            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="30px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </a-button>
            </template>

            <span slot="action" slot-scope="text, record">
          <a @click="gotodetail(record.orderSn)">查看详情</a>
          <a style="margin-left: 8px;" v-if="Number(record.status) >= 1 && record.status != '11'"
             @click="$router.push({path:'/orderCenter/SingleCBList',query:{orderSn:record.orderSn}})">订单成本</a>
           <a style="margin-left: 8px;" @click="seepaidanSupplierList(record)" v-if="record.status=='1'">派单</a>
          <a-menu-item v-show="record.status=='1'">
                  <a-popconfirm title="确定接单吗?" @confirm="() => orderNow(record.orderSn)">
                    <a style="color:deepskyblue">立即接单</a>
                  </a-popconfirm>
          </a-menu-item>

        </span>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction} from "../../api/manage";

export default {
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      fabricdata: [], // 面料成本列表
      url: {
        list: '/OrderFactoryController/listjaijaiChengbe', // 加价成本
        fabricList: '/OrderFactoryController/productFabric', //面料成本
      },
      // 面料成本表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '面料编号',
          align: "center",
          dataIndex: 'fabricCode'
        },
        {
          title: '成本金额',
          align: "center",
          dataIndex: 'allPrice'
        },
        {
          title: '对账金额',
          align: "center",
          dataIndex: 'jiesuanMpney'
        },
        {
          title: '是否对账',
          align: "center",
          dataIndex: 'jiesuan',
          customRender: (text) => {
            if (text == '0') {
              return '未对账'
            } else if (text == '1') {
              return '已对账'
            }
          }
        }
      ],
      // 加价成本列表
      columns2: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '成本项',
          align: "center",
          dataIndex: 'costName'
        },
        {
          title: '成本金额',
          align: "center",
          dataIndex: 'price'
        },
        {
          title: '对账金额',
          align: "center",
          dataIndex: 'amountMoney'
        },
        {
          title: '是否对账',
          align: "center",
          dataIndex: 'isAmount',
          customRender: (text) => {
            if (text == '0') {
              return '未对账'
            } else if (text == '1') {
              return '已对账'
            }
          }
        }
      ],

      // 工艺成本列表
      columns3: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '工艺名称',
          align: "center",
          dataIndex: 'gyname'
        },
        {
          title: '成本金额',
          align: "center",
          dataIndex: 'costPrice'
        },
        {
          title: '对账金额',
          align: "center",
          dataIndex: 'accountMoney'
        },
        {
          title: '是否对账',
          align: "center",
          dataIndex: 'isDuizhang',
          customRender: (text) => {
            if (text == '0') {
              return '未对账'
            } else if (text == '1') {
              return '已对账'
            }
          }
        }
      ],

      // 返修成本列表
      columns4: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '尺寸名称',
          align: "center",
          dataIndex: 'sizeName'
        },
        {
          title: '成本金额',
          align: "center",
          dataIndex: 'costPrice'
        },
        {
          title: '对账金额',
          align: "center",
          dataIndex: 'accountMoney'
        },
        {
          title: '是否对账',
          align: "center",
          dataIndex: 'isDuizhang',
          customRender: (text) => {
            if (text == '0') {
              return '未对账'
            } else if (text == '1') {
              return '已对账'
            }
          }
        }
      ],
    };
  },
  created() {
    this.getFabriclist()
  },
  methods: {

    /**
     * 获取面料成本
     */
    getFabriclist() {
      getAction(this.url.fabricList, {
        'productId': this.$route.query.product
      }).then(res => {
        if (res.code == '0') {
          this.fabricdata = res.data
        }
      })
    },

    // 切换tab标签的效果
    callback(key) {
      if (key == '1') { // 默认查询面料成本
        this.getFabriclist()
      } else if (key == '2') {
        this.url.list = '/OrderFactoryController/listjaijaiChengbe?productId=' + this.$route.query.product
      } else if (key == '3') {
        this.url.list = '/OrderFactoryController/getGYCB?productId=' + this.$route.query.product
      } else if (key == '4') {
        this.url.list = '/OrderFactoryController/getFanxiuCB?productId=' + this.$route.query.product
      }
      this.loadData()
    },
  },
};
</script>